<template>
  <div class="loginWrap">
    <!-- 头部组件引入 -->
    <div class="headercolor">
      <my-header title="登录">
        <!-- 左侧区域内容 -->
        <template #left>
          <div class="iconmin" @click="go">
            <img src="../../../static/images/login/icon.png" alt="" />
          </div>
        </template>
         <!-- 自定义右侧区域内容 -->
      <template #right>
        <div class="logins" @click="goo">注册</div>
      </template>
      </my-header>
    </div>

    <!-- 动态绑定:phone="userphone"-->
    <loginpublic :phone="userphone" :password="password" :user=1 >
      <template #inputslot>
        <van-field v-model="userphone"  @blur="sendcode()" maxlength="11" placeholder="请输入手机号" :rules="[{ required: true, message: '' }]"/>
        <van-field v-model="password" maxlength="6"  @blur="passwordf()"  :type="flag == true ? 'password' : 'text'" placeholder="请输入密码" :rules="[{ required: true, message: '' }]"/>
        <img src="../../../static/images/login/eye.png" alt="" class="imgicon" @click="changType()"/>
      </template>
      <!-- 登录 -->
      <template #btn>
        <div class="change">
          <span style="color: #fff">登录</span>
        </div>
      </template>
    </loginpublic>
    <!-- 隐私协议 -->
    <div class="privacy">
      <span class="left">
        <img src="../../../static/images/login/success.png" alt="" />
        隐私协议
      </span>
      <span class="right" @click="nopassward">忘记密码</span>
    </div>

    <!-- 其他社交方式登录 -->
    <div class="loginmode">
      <van-icon name="minus" size="24" class="left" />
      <span class="text">其他社交方式登录</span>
      <van-icon name="minus" size="24" class="right" />

      <!-- 图标 -->
      <div class="icon">
        <img src="../../../static/images/login/apple.png" alt="" />
        <img src="../../../static/images/login/qq.png" alt="" />
        <img src="../../../static/images/login/wechat.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "../../components/myHeader/myHeader.vue";
import loginpublic from "./loginpublic.vue";
export default {
  components: {
    loginpublic,
    MyHeader,
  },
  data() {
    return {
      userphone: "",
      password: "",
      user:'',
      type: "password",
      flag: true,
    
      formMess: {
        userphone: this.userphone
      }
    };
  },
  methods: {
   
    //密码显示隐藏
    changType() {
      this.flag = !this.flag;
    },
    nopassward() {
      this.$router.push({ path: "/forgetPassword" });
    },
    sendcode() {
      var reg = /^1[34578]\d{9}$/;
      if (this.userphone == "") {
        this.$toast('手机号不能为空');
        return false;
      } else if (!reg.test(this.userphone)) {
        this.$toast('手机号码格式不正确');
        return false;
      }else{
        return true;
      }
    },
    passwordf(){
      var reg = /^[0-9]{6}$/;
      if (this.password == "") {
        this.$toast('密码不能为空');
        return false;
      } else if (!reg.test(this.password)) {
        this.$toast('密码必须是6位数字');
        return false;
      }else{
        return true;
      }
    },
    // 返回上一页
    go() {
      this.$router.go(-1);
    },
    goo(){
      this.$router.push({path:'/register'})
    }
  },
  computed: {},
};
</script>


<style lang="less" scoped>
.loginWrap {
  /deep/.van-cell {
    height: 105px;
  }
  .chang {
    width: 72px;
    height: 32px;
    font-size: 34px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 60px;
  }
  /deep/.van-cell__value--alone {
    width: 254px;
    height: 32px;
    font-size: 34px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #232323;
    line-height: 60px;
    opacity: 0.6;
  }
  /deep/.van-cell {
    line-height: 65px;
  }
  /deep/ .van-nav-bar__title {
    color: #ffffff;
  }
  .headercolor {
    background-color: red;
  }
  .imgicon {
    width: 40px;
    height: 30px;
    z-index: 2;
    position: fixed;
    right: 63px;
    top: 510px;
  }
  .iconmin {
    img {
      width: 60px;
    }
  }
  .logins{
      color: #ffffff;
  }
  .privacy {
    font-size: 12px;
    margin: 25px;
    .left {
      height: 26px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 60px;
      img {
        width: 33px;
        height: 33px;
        display: inline-block;
        position: relative;
        top: 2px;
      }
    }
    .right {
      width: 109px;
      height: 26px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 60px;
      opacity: 0.59;
      position: relative;
      left: 410px;
      color: #a7a7a7;
    }
  }
  // 其他社交方式登录
  .loginmode {
    position: relative;
    top: 150px;
    text-align: center;
    .left {
      position: absolute;
      left: 185px;
      top: 10px;
    }
    .right {
      margin-right: -280px;
      margin-top: 10px;
    }
    .text {
      position: absolute;
      top: 5px;
      left: 250px;
      width: 231px;
      height: 26px;
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 60px;
    }
    .icon {
      display: flex;
      position: absolute;
      top: 80px;
      left: 180px;
      img {
        width: 76px;
        height: 75px;
        margin-right: 68px;
        margin-bottom: 114px;
      }
    }
  }
}
</style>

